<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<style>
    .el-input {
        width: 100%;
    }

    .el-cascader {
        width: 40%;
    }
</style>
<body>
<div id="app">
    <el-container v-loading="loading">
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">数据中心</el-breadcrumb-item>
                <el-breadcrumb-item>SKU库</el-breadcrumb-item>
                <el-breadcrumb-item>SKU新增</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="SKU" :model="SKU" :rules="rules" label-width="20%">
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="SKU编号" prop="sku_code">
                            <el-input v-model="SKU.sku_code" style="width:50%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="SKU名称" prop="sku_name">
                            <el-input v-model="SKU.sku_name" style="width:50%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="SKU单位" prop="sku_unit_id">
                            <el-select v-model="SKU.sku_unit_id" filterable placeholder="请选择单位" style="width:50%">
                                <el-option v-for="unit in unitList" :key="unit.id" :label="unit.unit_name"
                                           :value="unit.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="SKU品牌" prop="sku_brand_id">
                            <el-select v-model="SKU.sku_brand_id" filterable placeholder="请选择品牌" style="width:50%">
                                <el-option v-for="brand in brandList" :key="brand.id" :label="brand.brand_name"
                                           :value="brand.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="SKU型号" prop="sku_model">
                            <el-input v-model="SKU.sku_model" style="width:50%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="供货周期" prop="sku_lead_time">
                            <el-input v-model="SKU.sku_lead_time" style="width:50%">
                                <template slot="append">天</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="成本价格" prop="sku_cost_price">
                            <el-input v-model.number="SKU.sku_cost_price" style="width:50%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="官方价格" prop="sku_official_price">
                            <el-input v-model.number="SKU.sku_official_price" style="width:50%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="规格参数">
                            <el-button @click="addDomain">新增</el-button>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item v-for="
                                    (domain, index) in specSlugSet"
                                      :label="'属性' + (index+1)" :prop="'specSlugSet.' + index + '.spec'">
                            <el-cascader :options="specList" v-model="domain.spec" filterable
                                         change-on-select>
                            </el-cascader>
                            <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="图片" prop="sku_pic_url">
                            <el-upload class="upload-demo" action="${url}/uploadController/upload.json"
                                       accept=".jpeg,.png,.gif" :before-upload="beforeAvatarUpload"
                                       :on-success="handleAvatarSuccess" :on-remove="handleRemove" :on-exceed="onExceed"
                                       multiple :limit="1" list-type="picture-card">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="质检报告" >
                            <el-upload class="upload-demo" action="${url}/uploadController/upload.json"
                                        :before-upload="beforeAvatarUpload"
                                       :on-success="handleFileSuccess" :on-remove="handleRemove" :on-exceed="onExceed"
                                       multiple :limit="1">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="备注" prop="sku_content">
                            <el-input type="textarea" v-model="SKU.sku_content" style="width:50%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submit('SKU')">提交</el-button>
                    <a href="/dataCenter/skuIndex.page">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                loading:false,
                rules: {
                    sku_code: [{
                        required: true,
                        message: '请输入SKU编号',
                        trigger: 'blur'
                    }],
                    sku_name: [{
                        required: true,
                        message: '请输入SKU名称',
                        trigger: 'blur'
                    }],
                    sku_brand_id: [{
                        required: true,
                        message: '请选择品牌',
                        trigger: 'change'
                    }],
                    sku_unit_id: [{
                        required: true,
                        message: '请选择单位',
                        trigger: 'change'
                    }],
                    sku_lead_time: [{
                        required: true,
                        message: '请输入供货周期',
                        trigger: 'blur'
                    }],
                    sku_cost_price: [{
                        required: true,
                        message: '请输入成本价格',
                        trigger: 'blur'
                    }, {
                        type: 'number',
                        message: '价格必须为数字值'
                    }],
                    sku_official_price: [{
                        required: true,
                        message: '请输入官方价格',
                        trigger: 'blur'
                    }, {
                        type: 'number',
                        message: '价格必须为数字值'
                    }],
                },
                dialogVisible: false,
                SKU: {},
                brandList: [],
                unitList: [],
                specList: [],
                brand: '',
                unit: '',
                specSlugSet: [],
                file: '',
            }
        },
        methods: {
            onExceed(files, fileList) {
                this.$message({
                    type: 'info',
                    message: '最多只能上传一个文件',
                    duration: 6000
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handleAvatarSuccess(data, file) {
                if (data.ret) {
                    this.SKU.sku_pic_url = data.data.data;
                }
            },
            handleFileSuccess(data, file) {
                if (data.ret) {
                    this.SKU.sku_file_name = file.name;
                    this.SKU.sku_file_path = data.data.data;
                }
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('文件大小不能超过 2MB!');
                }
                return isLt2M;
            },
            submit: function (formName) {
                this.$confirm('请确认是否提交?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var SKU = this.SKU;
                    SKU.spec_name = [];
                    SKU.slug_name = []
                    this.specSlugSet.forEach(function (ele) {
                        if (ele.spec.length > 0) {
                            SKU.spec_name.push(ele.spec[0])
                            SKU.slug_name.push(ele.spec[1])
                        }
                    });
                    SKU.spec_name = SKU.spec_name.toString(",");
                    SKU.slug_name = SKU.slug_name.toString(",");
                    SKU.requestType = "add";
                    SKU.sku_type = "sku";
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.loading=true;
                            var msg = '';
                            $.ajax({
                                url: "/dataCenter/skuEdit.json",
                                type: "POST",
                                // async: false,
                                data: SKU,
                                success: (result) => {
                                    this.loading=false;
                                    if (result.ret) {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        });
                                        setTimeout(function () {
                                            window.location.href = "/dataCenter/skuIndex.page";
                                        }, 1000);
                                    }else{
                                        msg = result.msg;
                                        this.$message.error("操作失败，请稍后重试");
                                    }
                                }
                            });
                        } else {
                            this.$message({
                                message: '警告，请填写必填字段',
                                type: 'warning'
                            });
                            return false;
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
            },
            removeDomain(item) {
                var index = this.specSlugSet.indexOf(item)
                if (index !== -1) {
                    this.specSlugSet.splice(index, 1)
                }
            },
            addDomain() {
                this.specSlugSet.push({
                    spec: [],
                });
            },//获取品牌列表
            brandAjax: function () {
                $.ajax({
                    url: '/dataCenter/brandList.json?page=0&limit=0',
                    type: 'get',
                    success: (result)=> {
                        if (result.ret) {
                            this.brandList = result.data;
                        }else {
                            this.$message.error('品牌列表请求失败，请稍后重试');
                        }

                    }
                });
            },
            //获取单位列表
            unitAjax: function () {
                $.ajax({
                    url: '/dataCenter/unitList.json?page=0&limit=0',
                    type: 'get',
                    success: (result) => {
                        if (result.ret) {
                            this.unitList = result.data;
                        }else {
                            this.$message.error('单位列表请求失败，请稍后重试');
                        }
                    }
                });
            },
            //获取规格属性列表
            specAjax: function () {
                $.ajax({
                    url: '/dataCenter/specList.json?page=0&limit=0',
                    type: 'get',
                    dataType: 'json',
                    success: (result) =>{
                        if (result.ret) {
                            this.specList = result.data;
                        }else {
                            this.$message.error('规格列表请求失败，请稍后重试');
                        }
                    }
                });
            },
        },
        mounted: function () {
            this.brandAjax();
            this.unitAjax();
            this.specAjax();
        },
    })
</script>

</body>

</html>